<div class="page-title">
  <div class="row">
    <div class="col-xs-12"><h1>Executions</h1></div>
  </div>
</div>

<loader *ngIf="!executions"></loader>

<div *ngIf="executions && !executions.length" class="no-executions">
  You don't have any executions.
</div>

<pager [pagingData]="pagedData" (onChange)="fetchData($event)"></pager>

<div class="executions row" *ngIf="executions && executions.length">
  <div class="col-xs-12">

    <div class="table-help">
      <div class="col-xs-3">Configuration</div>
      <div class="col-xs-3">Playbook</div>
      <div class="col-xs-2">Last Updated</div>
      <div class="col-xs-2">Status</div>
    </div>

    <div class="box" *ngFor="let execution of executions">
      <div class="col-xs-3 name">
        <a [routerLink]="['/configurations']" [fragment]="execution.data.playbook_configuration.id">
          {{execution.data.playbook_configuration.id}} ({{execution.data.playbook_configuration.version}})
        </a>
      </div>
      <div class="col-xs-3 parameter">
        {{execution.data.playbook_configuration.playbook_name}}
      </div>
      <div class="col-xs-2 parameter">
        {{execution.time_updated|date_time}}
      </div>
      <div class="col-xs-2 state" [ngClass]="execution.data.state">
        {{execution.data.state}}
      </div>
      <div class="col-xs-2 button">
        <button
          class="btn btn-primary btn-xs"
          type="button"
          (click)="showExecutionLog(execution)"
          [shownFor]="'view_execution_steps'"
        >
          Logs
        </button>
        <button
          *ngIf="execution.data.state === 'Started'"
          (click)="cancelExecution(execution)"
          class="btn btn-danger btn-xs"
          type="button"
          [shownFor]="'delete_execution'"
        >
          Stop
        </button>
      </div>

    </div>
  </div>
</div>

<pager [pagingData]="pagedData" (onChange)="fetchData($event)"></pager>
